<template>
    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                   
                    @click="handleAddCategory"
            >新增
            </el-button>
        </el-col>
    </el-row>
    <!-- 查询结果 -->
    <el-table :data="categoryList" row-key="categoryId"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="categoryName" label="分类名称" width="160"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template v-slot="scope">
                <el-button
                           type="text"
                           icon="el-icon-edit"
                           @click="handleUpdateCategory(scope.row)"
                >修改
                </el-button>
                <el-button
                       
                        type="text"
                        icon="el-icon-plus"
                        @click="handleAddCategory(scope.row)"
                >新增
                </el-button>
                <el-button
                       
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDeleteCategory(scope.row)"
                >删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <update-category :title="title" :form="form" :open="open"
                 :category-options="categoryList"
                 v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update-category>
</template>

<script>
    import {listCategory, deleteDeviceCategory} from '/src/api/device/category'
    import updateCategory from './update.vue'

    export default {
        name: "index",
        components: {updateCategory},
        data() {
            return {
                //查询结果
                categoryList: [],
                //弹出框状态
                open: false,
                //查询参数
                queryParams: {},
                //新增或修改
                title: '',
                // 表单参数
                form: {},
            }
        },
        created() {
            this.getCategoryListByParam();
        },
        methods: {
            getCategoryListByParam() {
                listCategory(this.queryParams).then(response => {
                    this.categoryList = response.data;
                });
            },
            //修改分类
            handleUpdateCategory(row) {
                this.form = row
                const parentId = row.parentId
                //获取父级名称
                if (parentId === 0) {
                    this.form.parentName = '根分类'
                } else {
                    this.getParentCategoryName(this.categoryList, parentId)
                }
                this.title = "修改分类信息"
                this.open = true
            },
            //添加分类
            handleAddCategory(row) {
                this.form = {}
                if (row != null && row.categoryId) {
                    this.form.parentId = row.categoryId;
                    this.form.parentName = row.categoryName
                } else {
                    this.form.parentId = 0;
                    this.form.parentName = '根分类'
                }
                this.title = "新增分类信息"
                this.open = true
            },
            //删除分类
            handleDeleteCategory(row) {
                this.$confirm('是否确认删除名称为"' + row.categoryName + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return deleteDeviceCategory(row.categoryId);
                }).then(() => {
                    this.getCategoryListByParam();
                    this.msgSuccess("删除成功");
                })
            },
            //根据父级ID获取父级分类名称
            getParentCategoryName(categoryList, parentId) {
                for (let i = 0; i < categoryList.length; i++) {
                    const categoryInfo = categoryList[i]
                    if (categoryInfo.categoryId === parentId) {
                        this.form.parentName = categoryInfo.categoryName
                    }
                    if (categoryInfo.hasChildren) {
                        this.getParentCategoryName(categoryInfo.children, parentId)
                    }
                }
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getCategoryListByParam()
            },
        }
    }
</script>

<style scoped>

</style>
